<script setup lang='ts' name="policy-add">
import type { PlusColumn } from 'plus-pro-components'

import { useAddOrUpdateBankAccount, useGetBankAccountInfo } from '@fl/api/supplier'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const { isPending: addOrEditLoading, mutate: addOrEditMutate } = useAddOrUpdateBankAccount()

const visible = defineModel<boolean>('visible', { required: true })

const id = defineModel<null | string>('id')

const { data, isLoading } = useGetBankAccountInfo(id)

const form = ref()

const title = computed(() => id.value ? '编辑账户' : '新增账户')

const state = ref({
    accountName: '',
    accountNumber: '',
    bankName: '',
    isDefaultCard: '',
})

const columns: PlusColumn[] = [
    {
        label: '开户账户',
        labelWidth: '100px',
        prop: 'accountNumber',
        valueType: 'copy',
    },
    {
        label: '开户行名称',
        labelWidth: '100px',
        prop: 'bankName',
        valueType: 'copy',
    },
    {
        label: '开户名',
        labelWidth: '100px',
        prop: 'accountName',
        valueType: 'copy',
    },
    {
        label: '是否主要收款账户',
        labelWidth: '150px',
        options: [
            {
                label: '是',
                value: '1',
            },
            {
                label: '否',
                value: '0',
            },
        ],
        prop: 'isDefaultCard',
        valueType: 'radio',
    },
]

const rules = {
    accountName: [
        {
            message: '请输入开户名称',
            required: true,
        },
    ],
    accountNumber: [
        {
            message: '请输入开户账号',
            required: true,
        },
    ],
    bankName: [
        {
            message: '请输入开户行名称',
            required: true,
        },
    ],
}

async function submit() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        addOrEditMutate(state.value, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    form.value.formInstance.resetFields()
}
watchEffect(() => {
    if (data.value) {
        state.value = cloneDeep(data.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="700"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
                    class="mt-20"
        />

        <PlusForm v-else
                  ref="form"
                  v-model="state"
                  :columns="columns"
                  :label-width="120"
                  :rules="rules"
                  :has-footer="false"
                  :row-props="{ gutter: 20 }"
        />

        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="cancel">
                取消
            </el-button>

            <SubmitBtn type="primary"
                       :loading="addOrEditLoading"
                       @click="submit"
            >
                提交
            </SubmitBtn>
        </div>
    </PlusDialog>
</template>
